Skip to main content

第二篇：组件使用

[TOC]

第二篇：组件使用

组件可以扩展 HTML 元素，封装可重用的代码。

全局注册​

html部分

<div id="example">
  <my-component></my-component>
</div>

vue的script部分

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 创建根实例
new Vue({
  el: '#example'
})

渲染为：

<div id="example">
  <div>A custom component!</div>
</div>

局部注册​

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

组件接收传过来的值​

<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>


Vue.component('todo-item',{
    props:['content'],
    template:'<li>{{content}}</li>'
})

子组件向父组件传值​

<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>

Vue.component('todo-item',{
    props:['content','index'],
    template:'<li @click="handleClick">{{content}}</li>',
    methods:{
        handleClick:function () {
            this.$emit('delete',this.index)
        }
    }
})

var vm = new Vue({
    el:'.sss',
    data:data,
    methods: {
        handleDelete:function (index) {
            this.list.splice(index,1)
        }
    }
})

样式的作用域​

子组件的style 后面加 scoped 表示一个局部样式 去掉就是全局样式

<style scoped lang="scss">
</style>

路由懒加载​

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html